<template>
  <div class="home-container">
    <div class="home-content">
      <Button @click="tsmAddShowPopMenu">任务添加</Button>
      <div>
        <p v-for="(item, i) in psInfoJson" v-bind:key="i">
          第{{ i + 1 }}条数据是:{{ item }}
        </p>
        <div v-show="tsmAddIsVisible" style="border: 1px solid blue">
          <hr />
          <h2>任务录入</h2>
          <div style="border: 1px solid red">
            <span>任务脚本</span>
            <select id="">
              <option value="">ddos攻击脚本</option>
              <option value="">ddos防御脚本</option>
            </select>
          </div>
          <Button @click="a">确认提交任务</Button>
          <Button @click="a">取消录入任务</Button>
        </div>
      </div>
      <Button @click="tsmPs">任务查询</Button>
      <Input
        :rows="30"
        style="margin-top: 20px"
        v-model="userInfo"
        type="textarea"
      />
    </div>
  </div>
</template>

<script>
import { tsmPs } from '@/api'

export default {
    name: 'tsm',
    data() {
        return {
            psInfo: '',
            code: '',
            msg: '',
            psInfoJson: '',
            tsmAddIsVisible: true,
        }
    },
    methods: {
        tsmPs() {
            tsmPs().then((res) => {
                this.psInfoJson = res.data
                this.psInfo = JSON.stringify(res.data, null, 4)
                this.code = JSON.stringify(res.code, null, 4)
                this.msg = JSON.stringify(res.msg, null, 4)
            })
        },
    },
}
</script>

<style scoped>
.home-container {
  padding: 10px;
  padding-top: 5px;
}
.home-content {
  padding: 10px;
  border-radius: 5px;
  background: #fff;
}
</style>
